import { useState } from 'react'
import { useNavigate, useLocation } from 'react-router-dom'
import './index.css'

function DepartmentListPage() {
  const navigate = useNavigate()
  const location = useLocation()
  const [searchKeyword, setSearchKeyword] = useState('')
  
  // 从路由状态获取选择的院区信息
  const selectedCampus = location.state?.campus || {
    id: 1,
    name: '四川省保健院南苑',
    address: '四川省成都市锦江区画溪路666号'
  }

  // 科室数据（主科室 + 子科室）
  const departmentTabs: { id: number; name: string; icon: string; children: { id: number; name: string }[] }[] = [
    { id: 1, name: '外科', icon: '🔪', children: [
      { id: 101, name: '中医外科门诊' },
      { id: 102, name: '门诊外一科' },
      { id: 103, name: '门诊外二科' },
      { id: 104, name: '门诊外三科' },
      { id: 105, name: '门诊外四科' },
      { id: 106, name: '神经外科' }
    ]},
    { id: 2, name: '内科', icon: '💊', children: [
      { id: 201, name: '呼吸内科' },
      { id: 202, name: '消化内科' },
      { id: 203, name: '心血管内科' }
    ]},
    { id: 3, name: '全科门诊', icon: '👨‍⚕️', children: [
      { id: 301, name: '全科一诊' },
      { id: 302, name: '全科二诊' }
    ]},
    { id: 4, name: '口腔科', icon: '🦷', children: [
      { id: 401, name: '口腔综合' },
      { id: 402, name: '正畸' }
    ]},
    { id: 5, name: '耳鼻喉科', icon: '👂', children: [
      { id: 501, name: '耳科' },
      { id: 502, name: '鼻科' },
      { id: 503, name: '喉科' }
    ]},
    { id: 6, name: '皮肤科', icon: '🩹', children: [
      { id: 601, name: '皮肤综合' }
    ]},
    { id: 7, name: '妇产科', icon: '🤱', children: [
      { id: 701, name: '妇科门诊' },
      { id: 702, name: '产科门诊' }
    ]},
    { id: 8, name: '骨科', icon: '🦴', children: [
      { id: 801, name: '关节外科' },
      { id: 802, name: '运动医学' }
    ]},
    { id: 9, name: '儿科', icon: '👶', children: [
      { id: 901, name: '儿科门诊' }
    ]}
  ]

  // 当前激活的主科室
  const [activeMainId, setActiveMainId] = useState<number>(departmentTabs[0]?.id || 1)

  // 过滤子科室（按搜索关键字）
  const currentMain = departmentTabs.find(d => d.id === activeMainId)!
  const filteredDepartments = (currentMain?.children || []).filter(dept => 
    dept.name.toLowerCase().includes(searchKeyword.toLowerCase())
  )

  // 处理科室选择
  const handleDepartmentSelect = (department: { id: number; name: string; icon: string }) => {
    navigate('/doctor-list', { 
      state: { 
        campusId: selectedCampus.id,
        campusName: selectedCampus.name,
        departmentId: department.id,
        departmentName: department.name
      } 
    })
  }

  // 处理院区切换
  const handleSwitchCampus = () => {
    navigate('/campus-list')
  }

  // 处理智能客服咨询
  const handleConsultService = () => {
    navigate('/message')
  }

  return (
    <div style={{ minHeight: '100vh', background: '#f5f5f5' }}>
      {/* 顶部导航栏 */}
      <div style={{ 
        background: '#fff', 
        padding: '12px 16px', 
        borderBottom: '1px solid #eee',
        position: 'sticky',
        top: 0,
        zIndex: 100
      }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <div style={{ display: 'flex', alignItems: 'center' }}>
            <button 
              onClick={() => navigate(-1)}
              style={{ 
                border: 'none', 
                background: 'none', 
                fontSize: 18, 
                marginRight: 12,
                cursor: 'pointer'
              }}
            >
              ←
            </button>
            <h1 style={{ margin: 0, fontSize: 18, fontWeight: 600 }}>
              科室列表
            </h1>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 14, color: '#94a3b8' }}>
            <span style={{ fontSize: 22, lineHeight: 1 }}>⋯</span>
            <span style={{ fontSize: 18 }}>◁</span>
          </div>
        </div>
      </div>

      {/* 院区信息 */}
      <div style={{ 
        background: '#e8f3ff', 
        padding: '16px',
        borderBottom: '1px solid #d4e7ff'
      }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <div style={{ flex: 1 }}>
            <div style={{ 
              fontSize: 16, 
              fontWeight: 600, 
              color: '#333',
              marginBottom: 4
            }}>
              {selectedCampus.name}
            </div>
            <div style={{ 
              fontSize: 14, 
              color: '#666',
              lineHeight: 1.4
            }}>
              {selectedCampus.address}
            </div>
          </div>
          <button
            onClick={handleSwitchCampus}
            style={{
              background: 'none',
              border: '1px solid #1677ff',
              color: '#1677ff',
              padding: '8px 16px',
              borderRadius: 6,
              fontSize: 14,
              cursor: 'pointer',
              whiteSpace: 'nowrap'
            }}
          >
            切换院区 &gt;
          </button>
        </div>
      </div>

      {/* 主要内容 */}
      <div style={{ padding: '16px' }}>
        {/* 智能客服咨询横幅 */}
        <div style={{ 
          background: 'linear-gradient(135deg, #e8f3ff, #d4e7ff)', 
          borderRadius: 12, 
          padding: 16,
          marginBottom: 16,
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'space-between'
        }}>
          <div  style={{ flex: 1 }}>
            <div style={{ 
              fontSize: 16, 
              fontWeight: 600, 
              color: '#333',
              marginBottom: 4
             
            }} >
              不知道挂什么科,问问智能客服?
            </div>
          </div>
          <button
            onClick={handleConsultService}
            style={{
              background: '#1677ff',
              color: '#fff',
              border: 'none',
              padding: '8px 16px',
              borderRadius: 6,
              fontSize: 14,
              fontWeight: 600,
              cursor: 'pointer',
              whiteSpace: 'nowrap'
            }}
          >
            去咨询
          </button>
        </div>

        {/* 搜索框 */}
        <div style={{ 
          background: '#fff', 
          borderRadius: 12, 
          padding: 12,
          marginBottom: 16,
          boxShadow: '0 2px 8px rgba(0,0,0,0.06)'
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <span style={{ fontSize: 16, color: '#999' }}>🔍</span>
            <input
              type="text"
              placeholder="可输入科室名称检索"
              value={searchKeyword}
              onChange={(e) => setSearchKeyword(e.target.value)}
              style={{
                flex: 1,
                border: 'none',
                outline: 'none',
                fontSize: 14,
                background: 'transparent'
              }}
            />
          </div>
        </div>

        {/* 科室选项卡布局：左侧大类 + 右侧子科室列表 */}
        <div style={{ background: '#fff', borderRadius: 12, overflow: 'hidden', boxShadow: '0 2px 8px rgba(0,0,0,0.06)' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '96px 1fr', minHeight: 420 }}>
            {/* 左侧主科室tabs */}
            <div style={{ borderRight: '1px solid #eef0f5', background: '#f7f8fa' }}>
              {departmentTabs.map(tab => (
                <div
                  key={tab.id}
                  onClick={() => setActiveMainId(tab.id)}
                  style={{
                    display: 'flex', alignItems: 'center',
                    padding: '14px 12px', cursor: 'pointer',
                    background: activeMainId === tab.id ? '#fff' : 'transparent',
                    color: activeMainId === tab.id ? '#1f2937' : '#666',
                    fontWeight: activeMainId === tab.id ? 700 : 500,
                    borderLeft: activeMainId === tab.id ? '3px solid #3b82f6' : '3px solid transparent'
                  }}
                >
                  <span style={{ fontSize: 14 }}>{tab.name}</span>
                </div>
              ))}
            </div>
            {/* 右侧子科室列表 */}
            <div style={{ padding: 0 }}>
              {filteredDepartments.map((department) => (
                <div
                  key={department.id}
                  onClick={() => handleDepartmentSelect({ id: department.id, name: department.name, icon: '' })}
                  style={{
                    display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                    padding: '16px 12px', borderBottom: '1px solid #f1f3f8', cursor: 'pointer', color: '#111827'
                  }}
                  onMouseEnter={(e) => { e.currentTarget.style.background = '#f9fafb' }}
                  onMouseLeave={(e) => { e.currentTarget.style.background = 'transparent' }}
                >
                  <span style={{ fontSize: 14 }}>{department.name}</span>
                  <span style={{ color: '#9aa5b1' }}>›</span>
                </div>
              ))}
              {filteredDepartments.length === 0 && (
                <div style={{ textAlign: 'center', padding: 24, color: '#999' }}>暂无相关科室</div>
              )}
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

export default DepartmentListPage
